<template>
  <div>
    <!-- <div>tree</div>
    <div>-----</div>
    <div>{{ actionId }}</div> -->

    <div>
      <a-space>
        <a-button
          v-if="buttons.create"
          size="small"
          type="primary"
          @click="onClickNew"
        >
          创建
        </a-button>
      </a-space>
    </div>

    <TreeTable
      style="margin-top: 5px"
      :treeInfo="treeInfo"
      :dataSource="records"
      :columns="columns"
      :pagination="pagination"
      :row-selection="{
        selectedRowKeys: activeIds,
        onChange: onSelectChange
      }"
      @change="onTableChange"
      @row-click="onRowClick"
    />
  </div>
</template>

<script setup>
import TreeTable from './TreeTable.vue'

import { useTreeView } from './treeApi'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps(['actionId'])
// const emit = defineEmits(['search-change'])

const useData = useTreeView(props)

const { buttons, treeInfo } = useData
const { records, columns, pagination } = useData
const { onTableChange, activeIds, onSelectChange } = useData

function onRowClick(record) {
  // console.log(record)

  const rounteVal = router.currentRoute.value
  const { query, path } = rounteVal

  // console.log(rounteVal)

  const { menu, action } = query
  const query2 = { menu, action, view_type: 'form', id: record.id }
  router.push({ path, query: query2 })
}

function onClickNew() {
  const rounteVal = router.currentRoute.value
  const { query, path } = rounteVal

  const { menu, action } = query
  const query2 = { menu, action, view_type: 'form' }
  router.push({ path, query: query2 })
}
</script>
<style scoped></style>
